<template>
  <div id="toast" class="toast" v-show="isShow">
    <div>{{msg}}</div>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
      return {
          msg:'',
          isShow:false
      }
  },
  methods: {
      show(message,duration=1500){
          this.isShow = true
          this.msg = message
          setTimeout(()=>{
              this.msg = ''
              this.isShow = false
          },duration)
      }
  },
}
</script>

<style scope>
  .toast{
   position: fixed;
   top: 50%;
   left: 50%;
   z-index: 999;
   transform: translate(-50%,-50%);
   padding: 4px 6px;
   color: #fff;
   background-color:rgba(0,0,0,.75);
  }
</style>
